<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Context Menu 右键菜单</title>
    <style>
      ::-webkit-scrollbar {
        display: none;
      }
      html,
      body {
        overflow: hidden;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div id="mountNode"></div>
    <script>
      /*Fixing iframe window.innerHeight 0 issue in Safari*/ document.body
        .clientHeight;
    </script>
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js"></script>
    <style>
      #contextMenu {
        position: absolute;
        list-style: none;
        padding: 10px 5px;
        left: -100px;
        background: #ccc;
      }

      #contextMenu li {
        cursor: pointer;
      }
    </style>
    <script>
      var _extends =
        Object.assign ||
        function (target) {
          for (var i = 1; i < arguments.length; i++) {
            var source = arguments[i];
            for (var key in source) {
              if (Object.prototype.hasOwnProperty.call(source, key)) {
                target[key] = source[key];
              }
            }
          }
          return target;
        };

      var graph = new G6.Graph({
        container: "mountNode",
        width: window.innerWidth,
        height: window.innerHeight,
        defaultNode: {
          size: [40, 40],
        },
        modes: {
          default: ["drag-node"],
        },
      });

      G6.registerEdge(
        "self-line",
        {
          autoRotate: true,
          drawLabel: function drawLabel(cfg, group) {
            var labelCfg = cfg.labelCfg || {};
            var labelStyle = this.getLabelStyle(cfg, labelCfg, group);

            var text = group.addShape("text", {
              attrs: _extends({}, labelStyle, {
                text: cfg.label,
                fontSize: 12,
                fill: "#404040",
                stroke: "white",
                lineWidth: 5,
              }),
              className: "edge-label",
            });

            return text;
          },
        },
        "line"
      );

      var data = {
        nodes: [
          {
            id: "node1",
            label: "node1",
            x: 200,
            y: 100,
            shape: "rect",
          },
          {
            id: "node2",
            label: "node2",
            x: 250,
            y: 250,
            shape: "rect",
          },
          {
            id: "node3",
            label: "node3",
            x: 350,
            y: 100,
            shape: "rect",
          },
        ],
        edges: [
          {
            source: "node1",
            target: "node2",
            shape: "self-line",
            label: "测试文本",
          },
          {
            source: "node1",
            target: "node3",
            shape: "self-line",
            label: "测试文本2",
            labelCfg: {
              autoRotate: true,
              style: {
                stroke: "white",
                lineWidth: 5,
              },
            },
          },
        ],
      };

      graph.data(data);
      graph.render();

      // 在实际开发中，右键菜单内容可以使用JSX或HTML中的模板
      // 创建ul
      var conextMenuContainer = document.createElement("ul");
      conextMenuContainer.id = "contextMenu";

      // 创建li
      var firstLi = document.createElement("li");
      firstLi.innerText = "菜单项1";
      conextMenuContainer.appendChild(firstLi);

      var lastLi = document.createElement("li");
      lastLi.innerText = "菜单项2";
      conextMenuContainer.appendChild(lastLi);
      document.body.appendChild(conextMenuContainer);

      var menu = document.getElementById("contextMenu");
      graph.on("node:contextmenu", function (evt) {
        menu.style.left = evt.x + "px";
        menu.style.top = evt.y + "px";
      });

      graph.on("node:mouseleave", function (evt) {
        menu.style.left = "-100px";
      });
    </script>
  </body>
</html>
